<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['city:project:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['city:project:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['city:project:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['city:project:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['city:project:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['city:project:remove']">删除</el-button>
        </template>
      </el-table-column>
      <!--  <el-table-column label="项目ID" align="center" prop="projectId" width="180" /> -->
      <el-table-column label="项目名称" align="center" prop="projectName" width="180" />
      <el-table-column label="项目图片" align="center" prop="projectUrl" width="300">
        <template slot-scope="scope">
          <img width="280" height="150" v-if="scope.row.projectUrl!=null" :src="scope.row.projectUrl" />
        </template>
      </el-table-column>
      <el-table-column label="项目主题" align="center" prop="projectTitle" width="100">

        <template slot-scope="scope">
          <el-popover title="项目主题" placement="top-start" width="400" trigger="click">
            <el-input disabled type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 5, maxRows: 10}"
              v-model="scope.row.projectTitle" placeholder="项目主题"></el-input>
            <el-button round size="mini" slot="reference" icon="el-icon-search" type="text" plain>查看</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="项目内容" align="center" prop="projectContent">
        <template slot-scope="scope">
          <el-link v-if="scope.row.projectContent!==null&&scope.row.projectContent!==''"
            :href="baseUrl+scope.row.projectContent" target="_blank">预览<i class="el-icon-view el-icon--right"></i>
          </el-link>
        </template>
      </el-table-column>

      <el-table-column label="行业" align="center" prop="projectIndustry" width="150" />
      <el-table-column label="模式" align="center" prop="projectMode" width="150" />
      <el-table-column label="点击量(次)" align="center" prop="projectHits" width="100" />
      <el-table-column label="收藏量(次)" align="center" prop="projectCollect" width="100" />
      <el-table-column label="分享量(次)" align="center" prop="projectShare" width="100" />
      <el-table-column label="项目标签集合" align="center" prop="projectTag" width="100">
        <template slot-scope="scope">
          <el-popover title="项目标签集合" placement="top-start" width="400" trigger="click">
            <el-input disabled type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 5, maxRows: 10}"
              v-model="scope.row.projectTag" placeholder="项目标签集合"></el-input>
            <el-button round size="mini" slot="reference" icon="el-icon-search" type="text" plain>查看</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime" width="150" />

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <PDFViewer></PDFViewer>

    <!-- 添加或修改项目对话框 -->
    <el-dialog :title="title" :before-close="handleClose" :visible.sync="open" :close-on-press-escape="false"
      append-to-body center>
      <el-form class="demo" label-position="top" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="项目主题" prop="projectName" maxlength="200" show-word-limit>
          <el-input :autosize="{ minRows: 5, maxRows: 10}" v-model="form.projectTitle" type="textarea"
            placeholder="请输入项目标题" />
        </el-form-item>
        <el-form-item label="项目图片" prop="projectUrl">
          <image-upload v-model="form.projectUrl" :limit="5" />
        </el-form-item>
        <el-form-item label="行业" prop="projectIndustry">
          <el-select v-model="form.projectIndustry" filterable allow-create default-first-option placeholder="请选择行业">
            <el-option v-for="item in moduleList1" :key="item.moduleId" :label="item.moduleName"
              :value="item.moduleName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模式" prop="projectMode">
          <el-select v-model="form.projectMode" filterable allow-create default-first-option placeholder="请选择模式">
            <el-option v-for="item in moduleList2" :key="item.moduleId" :label="item.moduleName"
              :value="item.moduleName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目标签" prop="projectTag">
          <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择标签">
            <el-option v-for="item in tagList" :key="item.tagId" :label="item.tagName" :value="item.tagName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目内容">
          <file-upload v-model="form.projectContent" :limit="1" />
          <!--  <editor v-model="form.projectContent" :min-height="400" /> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listProject,
    getProject,
    delProject,
    addProject,
    updateProject
  } from "@/api/city/project";
  import {
    moduleList
  } from "@/api/city/module";
  import {
    tagList
  } from "@/api/city/tag";
  export default {

    name: "Project",
    data() {
      return {
        item: null,
        type:this.$route.query.type,
        moduleList1: [],
        moduleList2: [],
        tagList: [],
        value: [],
        baseUrl: process.env.VUE_APP_BASE_IMAGE_URL,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 项目表格数据
        projectList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          projectName: "",
          projectTitle: "",
          projectUrl: "",
          projectTag: "",
          projectContent: ""
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {}
      };
    },
    created() {
      this.getList();
      this.getTagList();
      this.getModuleList1();
      this.getModuleList2();
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        console.log("resetQuery")
       // this.$route.query.projectName = ""
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      /** 查询项目列表 */
      getList() {
        this.loading = true;
        // if (this.type=1) {
        //   console.log("this.$route.query.projectName",this.$route.query.projectName)
        //   this.queryParams.projectName = this.$route.query.projectName
        // }
        listProject(this.queryParams).then(response => {
          this.projectList = response.rows.map((item, index) => item = {
            'createTime': item.createTime,
            'projectContent': item.projectContent,
            'projectTitle': item.projectTitle,
            'projectId': item.projectId,
            'projectName': item.projectName,
            'projectHits': item.projectHits,
            'projectShare': item.projectShare,
            'projectCollect': item.projectCollect,
            'projectIndustry': item.projectIndustry,
            'projectMode': item.projectMode,
            'projectTag': item.projectTag != null && item.projectTag != "" ? JSON.parse(item
              .projectTag) : [],
            'projectUrl': item.projectUrl !== null && item.projectUrl !== '' ?
              'https://city-partner.oss-cn-shanghai.aliyuncs.com/' + item.projectUrl.split(",")[0] : null
          })

          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询标签集合 */
      getTagList() {
        tagList({}).then(response => {
          console.log("tagList:", response)
          this.tagList = response;
          // this.total = response.total;
          // this.loading = false;
        });
      },

      /** 查询行业集合 */
      getModuleList1() {
        moduleList({
          "moduleType": 0
        }).then(response => {
          console.log("moduleList1:", response)
          this.moduleList1 = response;
        });
      },
      /** 查询模式集合 */
      getModuleList2() {
        moduleList({
          "moduleType": 1
        }).then(response => {
          console.log("moduleList2:", response)
          this.moduleList2 = response;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          projectId: null,
          projectName: "",
          projectUrl: null,
          projectRoute: null,
          projectTag: null,
          projectContent: null,
          createTime: null
        };
        this.resetForm("form");
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.projectId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加项目";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const projectId = row.projectId || this.ids
        getProject(projectId).then(response => {
          this.form = response.data;
          this.value = JSON.parse(this.form.projectTag)
          this.open = true;
          this.title = "修改项目";
        });
      },
      /** 提交按钮 */
      submitForm() {

        moduleList({
          "moduleName": this.form.projectIndustry
        }).then(response => {
          console.log("module1:", response)
          this.form.projectRoute = response[0].moduleRoute;
          if (this.form.projectContent === null || this.form.projectUrl === null) {
            this.$modal.msgSuccess("图片或文件未上传");
          } else {
            this.$refs["form"].validate(valid => {
              if (valid) {
                this.form.projectTag = JSON.stringify(this.value)
                if (this.form.projectId != null) {
                  updateProject(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  });
                } else {
                  addProject(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  });
                }
              }
            });
          }
        });
        //  let str = new Blob([this.text], {type: 'text/plain;charset=utf-8'});




      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const projectIds = row.projectId || this.ids;
        this.$modal.confirm('是否确认删除项目编号为"' + projectIds + '"的数据项？').then(function() {
          return delProject(projectIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('/system/city/project/export', {
          ...this.queryParams
        }, `project_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style>
  .demo::-webkit-scrollbar {

    display: none;
    /* Chrome Safari */

  }



  .demo {

    scrollbar-width: none;
    /* firefox */

    -ms-overflow-style: none;
    /* IE 10+ */

    overflow-x: hidden;

    overflow-y: auto;
    height: 400px;
  }
</style>
